<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    window,onload = function () {
    //    var allA = document.getElementsByTagName("a");
    //    for(var i = 0 ; i< allA.length ; i++){
    //         allA[i].onclick = function () {
    //             alert("a")
    //         };
    //    } ;
       
       var ul = document.getElementById("ul");
       var btn = document.getElementById("btn");
       btn.onclick = function () {
           //创建一个li
           var li = document.createElement("li");
           li.innerHTML = "<a href='javascript:;'>超链接</a>";
           ul.appendChild(li);
       };
       //将事件统一元素绑定给共同的祖先元素，这样当后代上的元素被触发时，或冒泡到祖先元素；
       ul.onclick = function (event) {
           event = window.event||event;
           
           if(event.target=="javascript:;"){
            alert(event.target)
           }
       };
    };
</script>
<body>
    <button id="btn">添加</button>
    <ul id="ul">
        <li><a href="javascript:;">超链接</a></li>
        <li><a href="javascript:;">超链接</a></li>
        <li><a href="javascript:;">超链接</a></li>
    </ul>
</body>
</html>